<template>
    <div>
        <div class="topBox">
            <div class="title">wchime商城首页</div>
            <div class="context">欢迎来到wchime商城</div>
            <div class="favorites">|</div>
            <div class="login txt" @click="goUserCenter">{{userInfo?userInfo.name:'请登录'}}</div>
            

            <div class="shopCar txt">购物车</div>
            <div class="favorites txt">收藏夹</div>
            <div class="login txt" v-if="userInfo" @click="logout">退出登录</div>

            <div class="favorites">|</div>
            <div class="favorites txt" @click="goPath('/merchants')">商家中心</div>
            <div class="favorites txt">联系客服</div>
        </div>
    </div>
  </template>
  
  <script>
    import { getUserInfo } from '@/utils/auth'
  export default {
    name: 'topNav',
    // components: {},
    data() {
      return {
        userInfo:null,
      }
    },
    computed: {},
    created() {
      this.startGetUserInfo()
    },
    methods: {
      goPath(path){
            if(path){
                // this.$router.push({ path: path})
                //this.$router.push(path) // 当前路由停留在当前页面，选中效果还停留在上一次点击的路由上
                let routeData = this.$router.resolve({ path: path }); 
                window.open(routeData.href, '_blank');
            }
        
        },
        startGetUserInfo(){
        var user = getUserInfo()
        // console.log(user)
        if (user) {
          this.userInfo = JSON.parse(user)
         
        }

        },
        goUserCenter(){

          if(this.userInfo){
          // this.$router.push({ path: '/usercenter'})
          let routeData = this.$router.resolve({ path:`/usercenter` }); 
          window.open(routeData.href, '_blank');
        }
        else{
          this.$router.push({ path: '/login'})
        }
        },
        // 退出
    async logout() {
      await  this.$store.dispatch('user/Logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$emit('reload-data')
      
    },
    }
  }
  </script>
  <style lang="scss" scoped>
        .topBox{
            width: 100%;
            min-width: 970px;
            height: 25px;
            background-color: #F2F2F2;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.3rem;
            color: gray;
            text-align: center;
            div{
                margin: 0px 30px;
            }
        }
        .txt{
          cursor: pointer;
        }
  </style>
  